<template>
  <transition name="fade">
    <div v-if="tipVisible" class="tip">
      <div class="tip-wrap">
        {{ tip.text }}
      </div>
    </div>
  </transition>
</template>

<script>
  /**
   * 提示框组件，使用： this.$store.dispatch('setTip',{text:"提示文本"}); 注意this指向的上下文环境，有时候是写self
   * 已在APP.vue里引用 无需再下面的组件中再import 以及添加标签
   */
  import store from 'store/store'

  export default {
    data () {
      return {
        tipVisible: false
      }
    },
    computed: {
      tip() {
        return store.state.tip
      }
    },
    watch: {
      tip: 'tipShow'
    },
    methods: {
      tipShow () {
        let self = this
        self.tipVisible = true
        setTimeout(function () {
          self.tipVisible = false
          if (self.tip.callback) {
            self.tip.callback()
          }
        }, self.tip.time)
      }
    }
  }
</script>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s
  }

  .fade-enter, .fade-leave-active {
    opacity: 0
  }

  .tip {
    position: fixed !important;
    z-index: 50000 !important;
    padding: 5px 10px !important;
    margin: 0 auto !important;
    top:40% !important;
    left: 0 !important;
    right: 0 !important;
    line-height: 25px !important;
    background: none !important;
    text-align: center !important
  }

  .tip-wrap {
    padding: 10px 15px !important;
    display: inline-block !important;
    background: RGBA(0, 0, 0, 0.7) !important;
    color: #FFFFFF !important;
    border-radius: 5px !important;
    max-width: 80%;
    word-break: break-all;
  }


</style>
